<template>
  <div class="pan-main-file-list-content">
    <el-table
      v-loading="tableLoading"
      ref="fileTable"
      :data="fileList"
      :height="tableHeight"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      @cell-mouse-enter="showOperation"
      @cell-mouse-leave="hiddenOperation"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column
        label="文件名"
        prop="filename"
        sortable
        show-overflow-tooltip
        min-width="750"
      >
        <template slot-scope="scope">
          <div @click="clickFilename(scope.row)" class="file-name-content">
            <i
              :class="getFileFontElement(scope.row.fileType)"
              style="margin-right: 15px; font-size: 20px; cursor: pointer;"
            />
            <span style="cursor:pointer;">{{ scope.row.filename }}</span>
          </div>
          <div class="file-operation-content">
            <el-tooltip
              class="item"
              effect="light"
              content="下载"
              placement="top"
            >
              <download-button
                size="small"
                :circle-flag="true"
                :item="scope.row"
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="重命名"
              placement="top"
            >
              <rename-button
                size="small"
                :circle-flag="true"
                :item="scope.row"
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="删除"
              placement="top"
            >
              <delete-button
                size="small"
                :circle-flag="true"
                :item="scope.row"
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="分享"
              placement="top"
            >
              <share-button
                size="small"
                :circle-flag="true"
                :item="scope.row"
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="复制到"
              placement="top"
            >
              <copy-button size="small" :circle-flag="true" :item="scope.row" />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="移动到"
              placement="top"
            >
              <ShareButton size="small" :circle-flag="true" :item="scope.row" />
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        v-if="searchFlag"
        prop="parentFilename"
        label="位置"
        min-width="120"
        align="center"
      >
        <template slot-scope="scope">
          <el-link @click="goInFolder(scope.row.parentId)" type="primary">{{
            scope.row.parentFilename
          }}</el-link>
        </template>
      </el-table-column>
      <el-table-column
        prop="fileSizeDesc"
        sortable
        label="大小"
        min-width="120"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="updateTime"
        sortable
        align="center"
        label="修改日期"
        min-width="240"
      >
      </el-table-column>
    </el-table>

    <el-image-viewer
      class="el-image-viewer"
      v-if="showViewer"
      :initialIndex="imgIndex"
      :on-close="closeShowViewer"
      :url-list="imgUrl"
    />
  </div>
</template>

<script>
import DownloadButton from "../buttons/download-button";
import DeleteButton from "../buttons/delete-button";
import RenameButton from "../buttons/rename-button";
import CopyButton from "../buttons/copy-button";
import TransferButton from "../buttons/transfer-button";
import ShareButton from "../buttons/share-button";
import fileService from "../../api/file";
import panUtil from "../../utils/common";
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import { mapMutations, mapActions, mapGetters } from "vuex";

export default {
  name: "FileTable",
  components: {
    DownloadButton,
    DeleteButton,
    RenameButton,
    CopyButton,
    TransferButton,
    ShareButton,
    ElImageViewer,
  },
  props: {},
  data() {
    return {
      tableHeight: window.innerHeight - 200,
      showViewer: false,
      imgUrl: [],
      imgIndex: 0,
    };
  },
  methods: {
    ...mapMutations({
      reloadSelection: "file/setMultipleSelection",
      resetParentId: "file/setFileParentId",
      clearBreadCrumbs: "breadcrumb/clear",
      resetBreadCrumbs: "breadcrumb/reset",
      setSearchFlag: "file/setSearchFlag",
    }),
    ...mapActions({
      reloadFileList: "file/loadFileList",
    }),
    handleSelectionChange(multipleSelection) {
      this.reloadSelection(multipleSelection);
    },
    showOperation(row, column, cell, event) {
      panUtil.showOperation(cell);
    },
    hiddenOperation(row, column, cell, event) {
      panUtil.hiddenOperation(cell);
    },
    clickFilename(row) {
      let _this = this;
      switch (row.fileType) {
        case 0:
          _this.goInFolder(row.fileId);
          break;
        case 3:
        case 4:
        case 10:
          _this.showOffice(row);
          break;
        case 5:
        case 6:
          _this.showIframe(row);
          break;
        case 7:
          _this.showImg(row);
          break;
        case 8:
          _this.showMusic(row);
          break;
        case 9:
          _this.showVideo(row);
          break;
        case 11:
          _this.showCode(row);
        default:
          this.$message.error("该文件格式暂不支持预览,请您下载查看");
          break;
      }
    },
    goInFolder(fileId) {
      let _this = this;
      fileService.getBreadcrumbs(
        {
          fileId: fileId,
        },
        (res) => {
          _this.setSearchFlag(false);
          _this.clearBreadCrumbs();
          _this.resetBreadCrumbs(res.data);
          _this.resetParentId(fileId);
          _this.reloadFileList();
        },
        (res) => {
          _this.$message.error(res.message);
        }
      );
    },
    showOffice(row) {
      this.$message.error("该文件格式暂不支持预览,请您下载查看");
    },
    showIframe(row) {
      this.openNewPage("/preview/iframe", "PreviewIframe", {
        fileId: row.fileId,
      });
    },
    showImg(row) {
      this.imgUrl = new Array();
      for (let i = 0, iLength = this.fileList.length; i < iLength; ++i) {
        if (this.fileList[i].fileType === 7) {
          this.imgUrl.push(panUtil.getPreviewUrl(this.fileList[i].fileId));
        }
      }
      this.imgIndex = this.imgUrl.indexOf(panUtil.getPreviewUrl(row.fileId));
      this.showViewer = true;
    },
    showMusic(row) {
      this.openNewPage("/preview/music", "PreviewMusic", {
        fileId: row.fileId,
        parentId: row.parentId,
      });
    },
    showVideo(row) {
      this.openNewPage("/preview/video", "PreviewVideo", {
        fileId: row.fileId,
        parentId: row.parentId,
      });
    },
    showCode(row) {
      this.openNewPage("/preview/code", "PreviewCode", {
        fileId: row.fileId,
      });
    },
    openNewPage(path, name, params) {
      const { href } = this.$router.resolve({
        path: path,
        name: name,
        params: params,
      });
      window.open(href, "_blank");
    },
    getFileFontElement(type) {
      return panUtil.getFileFontElement(type);
    },
    closeShowViewer() {
      this.showViewer = false;
    },
  },
  computed: {
    ...mapGetters([
      "parentId",
      "fileTypes",
      "fileList",
      "searchFlag",
      "tableLoading",
    ]),
  },
  mounted() {
    this.reloadSelection(new Array());
  },
  watch: {},
};
</script>

<style>
.pan-main-file-list-content {
  width: 100%;
  height: 100%;
  margin-top: 20px;
}

.file-operation-content {
  display: none;
  position: absolute;
  right: 100px;
  top: 8px;
}

.el-image-viewer {
  width: 80%;
  height: 80%;
  margin-left: 10%;
  margin-top: 4%;
}
</style>
